import { React, useState } from 'react'
import { Button, Drawer, message, Input, Tabs } from 'antd';
import UploadComponent from '../../components/UploadComponent';
import Watermark from '../../components/Watermark';
import CanvasComponent from '../../components/CanvasComponent';
import {
  HomeOutlined,
  // UploadOutlined,
  SearchOutlined
} from '@ant-design/icons';
function DesignPage() {
  const [activeTab, setActiveTab] = useState(0);
  //抽屉
  const [open, setOpen] = useState(true);
  const showDrawer = () => {
    setOpen(true);
  };
  const onClose = () => {
    setOpen(false);
  };

  const onChange = (key) => {
    console.log(key);
  };
  const items = [
    {
      key: '1',
      label: '图片',
      // children: 'Content of Tab Pane 1',
    },
    {
      key: '2',
      label: '视频',
      // children: 'Content of Tab Pane 2',
    },
    {
      key: '3',
      label: '音频',
      // children: 'Content of Tab Pane 3',
    },
  ];
  const itemx = [
    {
      key: '1',
      label: '素材',
      children: [
        <div key={1}>
          <div style={{
            width: '100%',
            height: '100%',
            display: 'flex',
            flexWrap: 'wrap',
            color: '#fff'
          }}>
            <div style={{
              width: '60px',
              height: '30px',
              margin: '5px',
              textAlign: 'center',
              lineHeight: '30px',
              background: '#f00'
            }}>形状</div>
            <div style={{
              width: '60px',
              height: '30px',
              margin: '5px',
              textAlign: 'center',
              lineHeight: '30px',
              background: 'pink'
            }}>线条</div>
            <div style={{
              width: '60px',
              height: '30px',
              margin: '5px',
              textAlign: 'center',
              lineHeight: '30px',
              background: 'pink'
            }}>插图</div>
            <div style={{
              width: '60px',
              height: '30px',
              margin: '5px',
              textAlign: 'center',
              lineHeight: '30px',
              background: 'orange'
            }}>容器</div>
            <div style={{
              width: '60px',
              height: '30px',
              margin: '5px',
              textAlign: 'center',
              lineHeight: '30px',
              background: '#0f0'
            }}>边框</div>
            <div style={{
              width: '60px',
              height: '30px',
              margin: '5px',
              textAlign: 'center',
              lineHeight: '30px',
              background: '#0ff'
            }}>图标</div>
            <div style={{
              width: '60px',
              height: '30px',
              margin: '5px',
              textAlign: 'center',
              lineHeight: '30px',
              background: 'orange'
            }}>AIGC</div>
            <div style={{
              width: '60px',
              height: '30px',
              margin: '5px',
              textAlign: 'center',
              lineHeight: '30px',
              background: '#0ff'
            }}>动图</div>
          </div>
          <div>
            <div style={{
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center',
            }}>
              <span>AI做同款</span>
              <span>全部</span>
            </div>
            <div style={{
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center',
            }}>
              <div>
                <img style={{
                  width: '100px',
                  height: '100px',
                }} src="https://aigc-pub-prod-oss.chuangkit.com/aigc_module_image/612b8c310863f78d481570b1c8c18046.png?imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp" alt="" />
              </div>
              <div>
                <img style={{
                  width: '100px',
                  height: '100px',
                }} src="https://aigc-pub-prod-oss.chuangkit.com/aigc_module_image/612b8c310863f78d481570b1c8c18046.png?imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp" alt="" />
              </div>
              <div>
                <img style={{
                  width: '100px',
                  height: '100px',
                }} src="https://aigc-pub-prod-oss.chuangkit.com/aigc_module_image/612b8c310863f78d481570b1c8c18046.png?imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp" alt="" />
              </div>
            </div>
            <div style={{
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center',
            }}>
              <span>合计</span>
              <span>全部</span>
            </div>
            <div style={{
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center',
            }}>
              <div>
                <img style={{
                  width: '100px',
                  height: '100px',
                }} src="https://aigc-pub-prod-oss.chuangkit.com/aigc_module_image/6b922c628a831b22d891ca056f81d893.png?imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp" alt="" />
              </div>
              <div>
                <img style={{
                  width: '100px',
                  height: '100px',
                }} src="https://aigc-pub-prod-oss.chuangkit.com/aigc_module_image/6b922c628a831b22d891ca056f81d893.png?imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp" alt="" />
              </div>
              <div>
                <img style={{
                  width: '100px',
                  height: '100px',
                }} src="https://aigc-pub-prod-oss.chuangkit.com/aigc_module_image/6b922c628a831b22d891ca056f81d893.png?imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp" alt="" />
              </div>
            </div>
            <div style={{
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center',
            }}>
              <span>喜迎蛇年贴纸元素</span>
              <span>全部</span>
            </div>
            <div style={{
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center',
            }}>
              <div>
                <img style={{
                  width: '100px',
                  height: '100px',
                }} src="https://aigc-pub-prod-oss.chuangkit.com/aigc_module_image/6b922c628a831b22d891ca056f81d893.png?imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp" alt="" />
              </div>
              <div>
                <img style={{
                  width: '100px',
                  height: '100px',
                }} src="https://aigc-pub-prod-oss.chuangkit.com/aigc_module_image/6b922c628a831b22d891ca056f81d893.png?imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp" alt="" />
              </div>
              <div>
                <img style={{
                  width: '100px',
                  height: '100px',
                }} src="https://aigc-pub-prod-oss.chuangkit.com/aigc_module_image/6b922c628a831b22d891ca056f81d893.png?imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp" alt="" />
              </div>
            </div>
            <div style={{
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center',
            }}>
              <span>蛇年祝福语字体</span>
              <span>全部</span>
            </div>
            <div style={{
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center',
            }}>
              <div>
                <img style={{
                  width: '100px',
                  height: '100px',
                }} src="https://pub-cdn-oss.chuangkit.com/materials/2024/09/12/e3ae4ea6-97f5-4aa7-9e45-ff1d531f1963?imageMogr2%2Fthumbnail%2F320x%3E%2Fformat%2Fwebp" alt="" />
              </div>
              <div>
                <img style={{
                  width: '100px',
                  height: '100px',
                }} src="https://pub-cdn-oss.chuangkit.com/materials/2024/09/12/e3ae4ea6-97f5-4aa7-9e45-ff1d531f1963?imageMogr2%2Fthumbnail%2F320x%3E%2Fformat%2Fwebp" alt="" />
              </div>
              <div>
                <img style={{
                  width: '100px',
                  height: '100px',
                }} src="https://pub-cdn-oss.chuangkit.com/materials/2024/09/12/e3ae4ea6-97f5-4aa7-9e45-ff1d531f1963?imageMogr2%2Fthumbnail%2F320x%3E%2Fformat%2Fwebp" alt="" />
              </div>
            </div>
            <div style={{
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center',
            }}>
              <span>小红书emo表情包</span>
              <span>全部</span>
            </div>
            <div style={{
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center',
            }}>
              <div>
                <img style={{
                  width: '100px',
                  height: '100px',
                }} src="https://pub-cdn-oss.chuangkit.com/materials/2024/10/10/f6f622c8-8e7c-405c-a999-73cbd21736e4?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp" alt="" />
              </div>
              <div>
                <img style={{
                  width: '100px',
                  height: '100px',
                }} src="https://pub-cdn-oss.chuangkit.com/materials/2024/10/10/f6f622c8-8e7c-405c-a999-73cbd21736e4?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp" alt="" />
              </div>
              <div>
                <img style={{
                  width: '100px',
                  height: '100px',
                }} src="https://pub-cdn-oss.chuangkit.com/materials/2024/10/10/f6f622c8-8e7c-405c-a999-73cbd21736e4?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp" alt="" />
              </div>
            </div>
            <div style={{
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center',
            }}>
              <span>小红书贴纸元素</span>
              <span>全部</span>
            </div>
            <div style={{
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center',
            }}>
              <div>
                <img style={{
                  width: '100px',
                  height: '100px',
                }} src="https://pub-cdn-oss.chuangkit.com/materials/2024/12/05/0fd783eb-9e1d-4cd4-b87c-ecf39be7e43d_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp" alt="" />
              </div>
              <div>
                <img style={{
                  width: '100px',
                  height: '100px',
                }} src="https://pub-cdn-oss.chuangkit.com/materials/2024/12/05/0fd783eb-9e1d-4cd4-b87c-ecf39be7e43d_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp" alt="" />
              </div>
              <div>
                <img style={{
                  width: '100px',
                  height: '100px',
                }} src="https://pub-cdn-oss.chuangkit.com/materials/2024/12/05/0fd783eb-9e1d-4cd4-b87c-ecf39be7e43d_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp" alt="" />
              </div>
            </div>
            <div style={{
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center',
            }}>
              <span>除夕贴素材</span>
              <span>全部</span>
            </div>
            <div style={{
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center',
            }}>
              <div>
                <img style={{
                  width: '100px',
                  height: '100px',
                }} src="https://pub-cdn-oss.chuangkit.com/materials/2024/12/11/3222c4c3-4c46-4256-a8ed-7f2d9747828c?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp" alt="" />
              </div>
              <div>
                <img style={{
                  width: '100px',
                  height: '100px',
                }} src="https://pub-cdn-oss.chuangkit.com/materials/2024/12/11/3222c4c3-4c46-4256-a8ed-7f2d9747828c?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp" alt="" />
              </div>
              <div>
                <img style={{
                  width: '100px',
                  height: '100px',
                }} src="https://pub-cdn-oss.chuangkit.com/materials/2024/12/11/3222c4c3-4c46-4256-a8ed-7f2d9747828c?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp" alt="" />
              </div>
            </div>
          </div>
        </div>
      ],
    },
    {
      key: '2',
      label: '图片',
      children: [
        <div key={2}>

        </div>
      ],
    },
    {
      key: '3',
      label: '视频',
      children: [
        <div key={3}>

        </div>
      ],
    },
    {
      key: '4',
      label: '音频',
      children: [
        <div key={4}>

        </div>
      ],
    }
  ];
  const [selectedTab, setSelectedTab] = useState('tab1');
  const [dropdownValue, setDropdownValue] = useState('option1');

  // 处理标签页切换
  const handleTabChange = (tab) => {
    // 设置选中的标签页
    setSelectedTab(tab);
  };

  const handleDropdownChange = (event) => {
    setDropdownValue(event.target.value);
  };

  const tabs = [
    {
      id: 0, title: '上传', content: [
        <div key={0}>
          <div>
            <Drawer style={{
              marginLeft: '110px',
            }} open={open} onClose={onClose} placement='left' mask='false'>
              <div style={{
                display: 'flex',
                justifyContent: 'space-between',
              }}>
                <div style={{
                  width: '100px',
                  height: '50px',
                  lineHeight: '50px',
                }}>我的上传</div>
                <div style={{
                  marginLeft: '20px',
                }}>
                  <UploadComponent />
                </div>
              </div>
              <div>
                <Input addonBefore={<SearchOutlined />} placeholder="搜索素材" />
              </div>
              <div style={{
                display: 'flex',
                justifyContent: 'center',
                borderBottom: '1px solid #ccc',
              }}>
                <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
              </div>
              <div><h3>资源</h3></div>
            </Drawer>
            <button style={{
              position: "absolute",
              left: open ? "485px" : "110px",
              top: "50%",
              height: "50px",
              borderRadius: "25%",
            }} onClick={showDrawer}>{open ? '<' : '>'}</button>
          </div>
        </div>
      ]
    },
    {
      id: 1, title: '模版', content: [
        <div key={1} style={{ width: '100%', height: '100%', display: 'flex', flexWrap: 'wrap' }}>
          <div>
            <Drawer style={{
              marginLeft: '110px',
            }} title="Basic Drawer" open={open} onClose={onClose} placement='left' mask='false'>
              <div>
                <Input addonBefore={<SearchOutlined />} placeholder="搜索素材" />
              </div>
              <div style={{
                // display: 'flex',
                // justifyContent: 'center',
                borderBottom: '1px solid #ccc',
              }}>
                {/* <Tabs defaultActiveKey="1" items={itemx} onChange={onChange} /> */}
                <div className="tabs">
                  <button style={{
                    width: '45px',
                    height: '30px',
                  }} onClick={() => handleTabChange('tab1')} className={selectedTab === 'tab1' ? 'active' : ''}>推荐</button>
                  {/* 插入下拉菜单 */}
                  <select style={{
                    width: '50px',
                    height: '30px',
                  }} value={dropdownValue} onChange={handleDropdownChange} >
                    <option value="option1">分类</option>
                    <option value="option2">Option 2</option>
                    <option value="option3">Option 3</option>
                  </select>
                  <button style={{
                    width: '45px',
                    height: '30px',
                  }} onClick={() => handleTabChange('tab3')} className={selectedTab === 'tab3' ? 'active' : ''}>我的</button>
                </div>
                <div className="tab-content">
                  {selectedTab === 'tab1' && <div>
                    <div style={{ marginTop: '10px', justifyContent: 'space-around' }}>
                      <div>
                        <img src="https://pub-cdn-oss.chuangkit.com/designTemplate/2025/01/03/c4bb2a82-1c76-49be-a643-4af3d7765ad1_thumb?v=1735890362000&imageMogr2%2Fthumbnail%2F272x" alt="" />
                      </div>
                      <div>
                        <img src="https://pub-cdn-oss.chuangkit.com/designTemplate/2025/01/03/c4bb2a82-1c76-49be-a643-4af3d7765ad1_thumb?v=1735890362000&imageMogr2%2Fthumbnail%2F272x" alt="" />
                      </div>
                      <div>
                        <img src="https://pub-cdn-oss.chuangkit.com/designTemplate/2025/01/03/c4bb2a82-1c76-49be-a643-4af3d7765ad1_thumb?v=1735890362000&imageMogr2%2Fthumbnail%2F272x" alt="" />
                      </div>
                      <div>
                        <img src="https://pub-cdn-oss.chuangkit.com/designTemplate/2025/01/03/c4bb2a82-1c76-49be-a643-4af3d7765ad1_thumb?v=1735890362000&imageMogr2%2Fthumbnail%2F272x" alt="" />
                      </div>
                      <div>
                        <img src="https://pub-cdn-oss.chuangkit.com/designTemplate/2025/01/03/c4bb2a82-1c76-49be-a643-4af3d7765ad1_thumb?v=1735890362000&imageMogr2%2Fthumbnail%2F272x" alt="" />
                      </div>
                      <div>
                        <img src="https://pub-cdn-oss.chuangkit.com/designTemplate/2025/01/03/c4bb2a82-1c76-49be-a643-4af3d7765ad1_thumb?v=1735890362000&imageMogr2%2Fthumbnail%2F272x" alt="" />
                      </div>
                      <div>
                        <img src="https://pub-cdn-oss.chuangkit.com/designTemplate/2025/01/03/c4bb2a82-1c76-49be-a643-4af3d7765ad1_thumb?v=1735890362000&imageMogr2%2Fthumbnail%2F272x" alt="" />
                      </div>
                      <div>
                        <img src="https://pub-cdn-oss.chuangkit.com/designTemplate/2025/01/03/c4bb2a82-1c76-49be-a643-4af3d7765ad1_thumb?v=1735890362000&imageMogr2%2Fthumbnail%2F272x" alt="" />
                      </div>
                      <div>
                        <img src="https://pub-cdn-oss.chuangkit.com/designTemplate/2025/01/03/c4bb2a82-1c76-49be-a643-4af3d7765ad1_thumb?v=1735890362000&imageMogr2%2Fthumbnail%2F272x" alt="" />
                      </div>
                      <div>
                        <img src="https://pub-cdn-oss.chuangkit.com/designTemplate/2025/01/03/c4bb2a82-1c76-49be-a643-4af3d7765ad1_thumb?v=1735890362000&imageMogr2%2Fthumbnail%2F272x" alt="" />
                      </div>
                      <div>
                        <img src="https://pub-cdn-oss.chuangkit.com/designTemplate/2025/01/03/c4bb2a82-1c76-49be-a643-4af3d7765ad1_thumb?v=1735890362000&imageMogr2%2Fthumbnail%2F272x" alt="" />
                      </div>
                      <div>
                        <img src="https://pub-cdn-oss.chuangkit.com/designTemplate/2025/01/03/c4bb2a82-1c76-49be-a643-4af3d7765ad1_thumb?v=1735890362000&imageMogr2%2Fthumbnail%2F272x" alt="" />
                      </div>
                      <div>
                        <img src="https://pub-cdn-oss.chuangkit.com/designTemplate/2025/01/03/c4bb2a82-1c76-49be-a643-4af3d7765ad1_thumb?v=1735890362000&imageMogr2%2Fthumbnail%2F272x" alt="" />
                      </div>
                      <div>
                        <img src="https://pub-cdn-oss.chuangkit.com/designTemplate/2025/01/03/c4bb2a82-1c76-49be-a643-4af3d7765ad1_thumb?v=1735890362000&imageMogr2%2Fthumbnail%2F272x" alt="" />
                      </div>
                    </div>
                  </div>}
                  {selectedTab === 'tab3' && <div>
                    <div key={3} style={{
                      display: 'flex',
                      justifyContent: 'space-around',
                      alignItems: 'center',
                    }}>
                      <span>我购买的</span>&nbsp;&nbsp;&nbsp;
                      <span>我收藏的</span>
                      <button style={{
                        marginLeft: '170px',
                      }}><SearchOutlined /></button>
                    </div>
                  </div>}
                </div>
              </div>

            </Drawer>
            <button style={{
              position: "absolute",
              left: open ? "485px" : "110px",
              top: "50%",
              height: "50px",
              borderRadius: "25%",
            }} onClick={showDrawer}>{!open ? '>' : '<'}</button>
          </div>
        </div>
      ]
    },
    {
      id: 2, title: '素材', content: [
        <div key={2} style={{ width: '100%', height: '100%', display: 'flex', }}>
          素材
          <div>
            <Drawer style={{
              marginLeft: '110px',
            }} title="Basic Drawer" open={open} onClose={onClose} placement='left' mask='false'>
              <div>
                <Input addonBefore={<SearchOutlined />} placeholder="搜索素材" />
              </div>
              <div style={{
                display: 'flex',
                justifyContent: 'center',
                borderBottom: '1px solid #ccc',
              }}>
                <Tabs defaultActiveKey="1" items={itemx} onChange={onChange} />
              </div>
            </Drawer>
            <button style={{
              position: "absolute",
              left: open ? "485px" : "110px",
              top: "50%",
              height: "50px",
              borderRadius: "25%",
            }} onClick={showDrawer}>{!open ? '>' : '<'}</button>
          </div>
        </div>
      ]
    },
    {
      id: 3, title: '文字', content: [
        <div key={3} style={{ width: '100%', height: '100%', display: 'flex', }}>
          文字
          <div>
            <Drawer style={{
              marginLeft: '110px',
            }} title="Basic Drawer" open={open} onClose={onClose} placement='left' mask='false'>
              <div>
                <Input addonBefore={<SearchOutlined />} placeholder="搜索文字" />
              </div>
              <div style={{
                display: 'flex',
                flexWrap: 'nowrap',
                flexDirection: 'column',
                alignItems: 'center'
              }}>
                <h2>点击添加标题文字</h2>
                <h3>点击添加副标题文字</h3>
                <p>点击添加正文文字</p>
              </div>
              <div>
                <img src="https://static.chuangkit.com/tools/pc-design/prod/cff743a624926b765acc.svg" alt="" />
              </div>
              <div>
                <div style={{
                  display: 'flex',
                  justifyContent: 'space-between',
                  alignItems: 'center',
                }}>
                  <span>节目热点</span>
                  <span>全部</span>
                </div>
                <div style={{
                  display: 'flex',
                }}>
                  <div>
                    <img style={{
                      width: '100px',
                      height: '100px',
                    }} src="https://pub-cdn-oss.chuangkit.com/materials/2024/12/27/51c88ec5-0780-4cd7-aa89-99ee62f7f52d_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp" alt="" />
                  </div>
                  <div>
                    <img style={{
                      width: '100px',
                      height: '100px',
                    }} src="https://pub-cdn-oss.chuangkit.com/materials/2024/12/27/51c88ec5-0780-4cd7-aa89-99ee62f7f52d_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp" alt="" />
                  </div>
                  <div>
                    <img style={{
                      width: '100px',
                      height: '100px',
                    }} src="https://pub-cdn-oss.chuangkit.com/materials/2024/12/27/51c88ec5-0780-4cd7-aa89-99ee62f7f52d_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp" alt="" />
                  </div>
                </div>
              </div>
              <div>
                <div style={{
                  display: 'flex',
                  justifyContent: 'space-between',
                  alignItems: 'center',
                }}>
                  <span>特效文字</span>
                  <span>全部</span>
                </div>
                <div style={{
                  display: 'flex',
                }}>
                  <div>
                    <img style={{
                      width: '100px',
                      height: '100px',
                    }} src="https://pub-cdn-oss.chuangkit.com/materials/2024/12/27/51c88ec5-0780-4cd7-aa89-99ee62f7f52d_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp" alt="" />
                  </div>
                  <div>
                    <img style={{
                      width: '100px',
                      height: '100px',
                    }} src="https://pub-cdn-oss.chuangkit.com/materials/2024/12/27/51c88ec5-0780-4cd7-aa89-99ee62f7f52d_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp" alt="" />
                  </div>
                  <div>
                    <img style={{
                      width: '100px',
                      height: '100px',
                    }} src="https://pub-cdn-oss.chuangkit.com/materials/2024/12/27/51c88ec5-0780-4cd7-aa89-99ee62f7f52d_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp" alt="" />
                  </div>
                </div>
              </div>
              <div>
                <div style={{
                  display: 'flex',
                  justifyContent: 'space-between',
                  alignItems: 'center',
                }}>
                  <span>带货图文</span>
                  <span>全部</span>
                </div>
                <div style={{
                  display: 'flex',
                }}>
                  <div>
                    <img style={{
                      width: '100px',
                      height: '100px',
                    }} src="https://pub-cdn-oss.chuangkit.com/materials/2024/12/27/51c88ec5-0780-4cd7-aa89-99ee62f7f52d_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp" alt="" />
                  </div>
                  <div>
                    <img style={{
                      width: '100px',
                      height: '100px',
                    }} src="https://pub-cdn-oss.chuangkit.com/materials/2024/12/27/51c88ec5-0780-4cd7-aa89-99ee62f7f52d_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp" alt="" />
                  </div>
                  <div>
                    <img style={{
                      width: '100px',
                      height: '100px',
                    }} src="https://pub-cdn-oss.chuangkit.com/materials/2024/12/27/51c88ec5-0780-4cd7-aa89-99ee62f7f52d_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp" alt="" />
                  </div>
                </div>
              </div>
               <div>
                <div style={{
                  display: 'flex',
                  justifyContent: 'space-between',
                  alignItems: 'center',
                }}>
                  <span>plog花字</span>
                  <span>全部</span>
                </div>
                <div style={{
                  display: 'flex',
                }}>
                  <div>
                    <img style={{
                      width: '100px',
                      height: '100px',
                    }} src="https://pub-cdn-oss.chuangkit.com/materials/2024/12/27/51c88ec5-0780-4cd7-aa89-99ee62f7f52d_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp" alt="" />
                  </div>
                  <div>
                    <img style={{
                      width: '100px',
                      height: '100px',
                    }} src="https://pub-cdn-oss.chuangkit.com/materials/2024/12/27/51c88ec5-0780-4cd7-aa89-99ee62f7f52d_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp" alt="" />
                  </div>
                  <div>
                    <img style={{
                      width: '100px',
                      height: '100px',
                    }} src="https://pub-cdn-oss.chuangkit.com/materials/2024/12/27/51c88ec5-0780-4cd7-aa89-99ee62f7f52d_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp" alt="" />
                  </div>
                </div>
              </div>
              <div>
                <div style={{
                  display: 'flex',
                  justifyContent: 'space-between',
                  alignItems: 'center',
                }}>
                  <span>促销优惠卷</span>
                  <span>全部</span>
                </div>
                <div style={{
                  display: 'flex',
                }}>
                  <div>
                    <img style={{
                      width: '100px',
                      height: '100px',
                    }} src="https://pub-cdn-oss.chuangkit.com/materials/2024/12/27/51c88ec5-0780-4cd7-aa89-99ee62f7f52d_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp" alt="" />
                  </div>
                  <div>
                    <img style={{
                      width: '100px',
                      height: '100px',
                    }} src="https://pub-cdn-oss.chuangkit.com/materials/2024/12/27/51c88ec5-0780-4cd7-aa89-99ee62f7f52d_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp" alt="" />
                  </div>
                  <div>
                    <img style={{
                      width: '100px',
                      height: '100px',
                    }} src="https://pub-cdn-oss.chuangkit.com/materials/2024/12/27/51c88ec5-0780-4cd7-aa89-99ee62f7f52d_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp" alt="" />
                  </div>
                </div>
              </div>
            </Drawer>
            <button style={{
              position: "absolute",
              left: open ? "485px" : "110px",
              top: "50%",
              height: "50px",
              borderRadius: "25%",
            }} onClick={showDrawer}>{!open ? '>' : '<'}</button>
          </div>
        </div>
      ]
    },
    {
      id: 4, title: '图片', content: [
        <div key={4} style={{ width: '100%', height: '100%', display: 'flex', }}>
          图片
          <div>
            <Drawer style={{
              marginLeft: '110px',
            }} title="Basic Drawer" open={open} onClose={onClose} placement='left' mask='false'>
              <p>Some contents...</p>
              <p>Some contents...</p>
              <p>Some contents...</p>
            </Drawer>
            <button style={{
              position: "absolute",
              left: open ? "485px" : "110px",
              top: "50%",
              height: "50px",
              borderRadius: "25%",
            }} onClick={showDrawer}>{!open ? '>' : '<'}</button>
          </div>
        </div>
      ]
    },
    {
      id: 5, title: '背景', content: [
        <div key={5} style={{ width: '100%', height: '100%', display: 'flex', }}>
          背景
          <div>
            <Drawer style={{
              marginLeft: '110px',
            }} title="Basic Drawer" open={open} onClose={onClose} placement='left' mask='false'>
              <p>Some contents...</p>
              <p>Some contents...</p>
              <p>Some contents...</p>
            </Drawer>
            <button style={{
              position: "absolute",
              left: open ? "485px" : "110px",
              top: "50%",
              height: "50px",
              borderRadius: "25%",
            }} onClick={showDrawer}>{!open ? '>' : '<'}</button>
          </div>
        </div>
      ]
    },
    {
      id: 6, title: '组件', content: [
        <div key={6} style={{ width: '100%', height: '100%', display: 'flex', }}>
          组件
          <div>
            <Drawer style={{
              marginLeft: '110px',
              zIndex: 1
            }} title="Basic Drawer" open={open} onClose={onClose} placement='left' mask='false'>
              <p>Some contents...</p>
              <p>Some contents...</p>
              <p>Some contents...</p>
            </Drawer>
            <button style={{
              position: "absolute",
              left: open ? "485px" : "110px",
              top: "50%",
              height: "50px",
              borderRadius: "25%",
            }} onClick={showDrawer}>{!open ? '>' : '<'}</button>
          </div>
        </div>
      ]
    },
    {
      id: 7, title: 'AI工具', content: [
        <div key={7} style={{ width: '100%', height: '100%', display: 'flex', }}>
          AI工具
          <div>
            <Drawer style={{
              marginLeft: '110px',
            }} title="Basic Drawer" open={open} onClose={onClose} placement='left' mask='false'>
              <p>Some contents...</p>
              <p>Some contents...</p>
              <p>Some contents...</p>
            </Drawer>
            <button style={{
              position: "absolute",
              left: open ? "485px" : "110px",
              top: "50%",
              height: "50px",
              borderRadius: "25%",
            }} onClick={showDrawer}>{!open ? '>' : '<'}</button>
          </div>
        </div>
      ]
    },
    {
      id: 8, title: '画笔', content: [
        <div key={8} style={{ width: '100%', height: '100%', display: 'flex', }}>
          画笔

        </div>
      ]
    }
  ];
  const [showWatermark, setShowWatermark] = useState(true);
  const toggleWatermark = () => {
    setShowWatermark(!showWatermark);
  };
  return (
    <div>

      <div style={{
        height: '100vh',
        display: 'flex',
      }}>
        <div style={{
          width: '60px',
          borderRight: '1px solid #ccc',
          position: 'sticky',
          top: 0, /* 吸顶效果 */
          padding: '20px',
          border: '1px solid #ddd',
          boxShadow: '0 2px 10px rgba(0, 0, 0, 0.1)'
        }}>
          <ul style={{ listStyleType: 'none', padding: 0 }}>
            {tabs.map(tab => (
              <li
                key={tab.id}
                onClick={() => setActiveTab(tab.id)}
                style={{
                  padding: '10px',
                  cursor: 'pointer',
                  textAlign: 'center',
                  backgroundColor: activeTab === tab.id ? '#ddd' : 'transparent',
                  marginBottom: '5px',
                }}
              >
                <HomeOutlined /><br />
                {tab.title}
              </li>
            ))}
          </ul>
        </div>

        <div style={{
          flexGrow: 1,
          padding: '10px',
          overflowY: 'auto',
          height: '100 %',
          maxHeight: '100vh',
        }}>
          <div>{tabs[activeTab].content}</div>
          <div>
            <div style={{
              width: '100%',
              height: '100%',
              display: 'flex',
              flexDirection: 'row',
              justifyContent: 'center',

            }}>

              <button onClick={toggleWatermark}>
                {showWatermark ? '移除水印' : '添加水印'}
              </button>
              <Watermark text="示例水印" show={showWatermark} />
            </div>
          </div>
          <div style={{
            marginLeft: '460px',
            width: '100px',
            height: '100px',
          }}>
            <CanvasComponent />
          </div>
        </div>
      </div>
    </div >
  )
}
export default DesignPage
